     /* 外部样式  */
     /* 样式初始化 */
     body,ul,li,p {
        margin:0;    /* 外边距为0 */
        padding:0;   /*  内部边距为0 */
     }
     ul {
        list-style-type:none;  /*  去掉列表标识  */
     }
     /*  一级导航条样式*/
     ul.one{
        width:800px;     /*  设置宽度  */
        height:50px;     /*  设置高度  */
        border:1px solid black;   /* 设置边框属性；1px粗细，实线，黑色*/
        /* 设置外边距  上下为0 左右为auto */
        margin:0 auto;
     }
     ul.one > li {
        /*  想让快级元素（默认独占一行，从上到下依次排列） 在一行中显示  */
        float:left;    /*设置 左浮动*/
        width:25%;
        height:50px;
        text-align:center;  /*  让文本或者行内元素  水平居中*/
        line-height:50px;  /* 设置  行 高属性值  为高度值  文字垂直居中*/
     }
     ul.one > li > p:hover{
        background-color:#ccc;      /*设置背景颜色*/
        color:rgb(0,0,255);  /*设置文本颜色*/
     }
     /* 二级导航条样式*/
    ul.two{
      display:none;   /*设置显示方式：none为不显示*/
      position:relative;    /*作用：给予元素绝对定位   参照物作用*/
    }

    ul.one > li:hover >  ul.two{    /*  >直接子集就是包含关系  */
      display:block;  /*设置显示方式：块级元素显示方式*/
    }
    /*   三级导航条样式   */
    ul.three{
      /* 位置调整 */
      position:absolute;
      left:200px;
      width:200px;
      top:0px;
      display:none;
    }
    ul.two > li:hover > ul.three{
      display:block;
    }